<!--
 * @Author: gyc
 * @Date: 2020-04-27 09:57:20
 * @LastEditTime: 2020-08-21 14:33:44
 * @Description: Nuxt测试版
 -->
<template>
  <div>
    <div class="button-box" id="box1" v-if="type === 1" @click="cancel">
      <span>{{msg}}</span>
    </div>
    <div class="button-box" id="box2" v-if="type === 2" @click="confirm" :style="{'background-color':color}">
      <span>{{msg}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "saoButton",
  data() {
    return {};
  },
  props: ["type", "msg", "color"],
  mounted() {},
  methods: {
    confirm() {
      this.$emit("confirm");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
.button-box {
  position: relative;
  display: inline-flex;
  width: 100px;
  padding-left: 6px;
  padding-right: 6px;
  height: 26px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  font-weight: 400;
  color: black;
}
#box1 {
  background-color: #eee;
  transition: all 0.2s ease-in-out;
  clip-path: polygon(6px 0, 100px 0, 100px 20px, 90px 26px, 0 26px, 0 6px);
  &:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
    background-color: #bbb;
  }
}
#box2 {
  background-color: black;
  transition: all 0.2s ease-in-out;
  clip-path: polygon(6px 0, 100px 0, 100px 20px, 90px 26px, 0 26px, 0 6px);
  color: white;
  &:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  }
}
</style>